<template>
  <el-form-item label="图片">
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :show-file-list="false"
      :on-change="handleChange2"
      :on-success="handleAvatarSuccess2"
      :auto-upload="false"
    >
      <!--              :before-upload="beforeAvatarUpload2"-->
      <img v-if="form.pic" :src="form.pic" class="avatar" width="140" height="140" >
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </el-form-item>



  <!--表格渲染-->
  <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="title" label="名称" />
    <el-table-column label="图片" >
      　　<template slot-scope="scope">
      　　　　<img :src="scope.row.pic" width="40" height="40" class="head_pic"/>
      　　</template>
    </el-table-column>
    <el-table-column v-permission="['admin','courseInfo:edit','courseInfo:del']" label="操作" width="150px" align="center">
      <template slot-scope="scope">
        <udOperation
          :data="scope.row"
          :permission="permission"
        />
      </template>
    </el-table-column>
</template>

<script>

import axios from "axios";

export default {
  name: 'el-upload',
  data() {
    return {
      imageFile: '', // 图片文件
      uploadUrl: `${this.$baseUrl}/project/api/file/fileUpload` // 上传路径
    }
  },
  methods: {

    handleAvatarSuccess2(res, file) {
      this.form.pic = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isJPG && isLt2M;
    },
    // 文件上传的钩子 上传成功后保存的数组
    handleChange2(file) {
      let _file = file.raw
      let windowURL = window.URL || window.webkitURL
      this.imageUrl = windowURL.createObjectURL(_file)
      this.imageFile = new FormData()
      this.imageFile.append('file', _file, _file.name)
      this.imageFile.append('modular', '后台')
      this.imageFile.append('usedFileUrl', null)
      let _this = this
      async function upload() {
        await axios.post(_this.uploadUrl, _this.imageFile, this.config).then(function(req) {
          if (req.data.code === 200) { // 这个200是数值还是？
            _this.imageUrl2=req.data.data
            _this.form.pic=req.data.data
          }
        })
      }
      upload()
    }
  }
}
</script>

<style scoped>

</style>
/**
片段
【1】上传组建的使用，后台方法操作oss
【2】table里image的使用，dto里必须有这个字段，还必须重新编译class
*/
